<template>
	<view class="pinggujieguo">
		<headertop title="评估结果" str="orderlist" str1="oridei" :back1="back1"></headertop>
		<view class="headerback">

		</view>
		<view class="" :style="{'margin-top':statusBarHeight+'px','width':'100%','height':barHeight+'px'}">
		</view>
		<view class="caerd">
			<view class="caerd_center">
				<view class="line">
					<view class="lefttext">
						<image :src="_static('/images/Frame@2x(28).png')" mode=""></image>
						<span>评测人：</span>
					</view>
					<view class="name">
						{{pingguobj['nickname']}}
					</view>
				</view>
				<view class="line">
					<view class="lefttext">
						<image :src="_static('/images/Frame@2x(29).png')" mode=""></image>
						<span>测评时间：</span>
					</view>
					<view class="name">
						{{pingguobj['createtime']}}
					</view>
				</view>
			</view>
		</view>
		<view class="ceshiboxss">
			<view class="itemboxs" v-for="(item,index) in  pingguobj['result']" :key="index">
				<view class="centyer">

					<view class="topbiaoti">
						<view class="leff">
							<image :src="_static('/images/Group 11682@2x.png')" class="xbq" mode="">
							</image>
							<span>{{item.title}}</span>
						</view>
						<view class="rightfenshu">
							{{item.score}}分
						</view>
					</view>
					<view class="">
						<span style="font-size: 28rpx;color: #86909C;">({{item.describe}})</span>
					</view>
					<view style="background: #F2F3F5;width: 100%;height: 2rpx;margin-top: 30rpx;">

					</view>
					<view class="celiang">
						<view :class="classfun(item.result,ind)"
							:style="{'width':`${100/item.result.length}%`,'background':ite.color}"
							v-for="(ite,ind) in item['result']">
							<view class="zhibiaonum">
								<view class="zbbox" v-if="ite.level==item.result_rule.level">
									<span>{{item.score}}</span>
									<image :src="_static('/images/zhibiao.png')" mode=""></image>
								</view>
							</view>
							{{ite.level}}
						</view>
					</view>
					<view class="jiegupjieshi" :style="{'height':item.flag1?'':'88rpx','margin-top': '24rpx'}">
						<view class="headertop1" @click="zhankai('结果解释',index)">
							<span>结果解释：</span>
							<image :src="_static('/images/Frjt.png')" class="arrow"
								:style="{'rotate':item.flag1?'90deg':'0deg'}" mode=""></image>
						</view>
						<view class="mshubox">
							{{item.result_rule.result}}
						</view>
					</view>
					<view class="jiegupjieshi" :style="{'height':item.flag2?'':'88rpx'}">
						<view class="headertop1" @click="zhankai('辅助建议',index)">
							<span>辅助建议：</span>
							<image :src="_static('/images/Frjt.png')" class="arrow"
								:style="{'rotate':item.flag2?'90deg':'0deg'}" mode=""></image>
						</view>
						<view class="mshubox">
							{{item.result_rule.guidance_advice}}
						</view>
					</view>
					<view class="jiegupjieshi" :style="{'height':item.flag3?'':'88rpx','border':'none'}">
						<view class="headertop1" @click="zhankai('日常生活建议',index)">
							<span>日常生活建议：</span>
							<image :src="_static('/images/Frjt.png')" class="arrow"
								:style="{'rotate':item.flag3?'90deg':'0deg'}" mode=""></image>
						</view>
						<view class="mshubox">
							{{item.result_rule.daily_advice}}
						</view>
					</view>
					<view class="textss">
						以上建议仅供参考，如果您有不适的症状，应及时咨询您的主治医生或关注的私人医生进行专业诊断和治疗
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onPageScroll,
		onLoad,
		onShow,
		onReachBottom
	} from "@dcloudio/uni-app";
	import ulm, {
		$api
	} from '@/ulm';
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	import headertop from '@/components/header.vue'
	import {
		_static
	} from '@/ulm/utils/url.js'
	const statusBarHeight = ref('')
	const barHeight = ref('')
	const back1 = ref('')
	const pingguobj = ref({})

	const flag = ref(false)
	onLoad((opt) => {
		if (opt.id) {
			initsj(opt.id)
		} else {
			pingguobj.value = uni.getStorageSync('pingguobj')
			for (var i in pingguobj.value['result']) {
				pingguobj.value['result'][i]['flag1'] = false
				pingguobj.value['result'][i]['flag2'] = false
				pingguobj.value['result'][i]['flag3'] = false
			}
			console.log(pingguobj.value, 'pingguobj.value pingguobj.value pingguobj.value ');
		}
	})
	onMounted(() => {
		statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight
		const {
			top,
			height
		} = wx.getMenuButtonBoundingClientRect();
		barHeight.value = height ? height + (top - statusBarHeight.value) * 2 : 38;
	})
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = '#81D6FF'
		} else {
			back1.value = ''
		}
	})

	function zhankai(str, ind) {
		if (str == '结果解释') {
			pingguobj.value['result'][ind]['flag1'] = !pingguobj.value['result'][ind]['flag1']
		} else if (str == '辅助建议') {
			pingguobj.value['result'][ind]['flag2'] = !pingguobj.value['result'][ind]['flag2']
		} else if (str == '日常生活建议') {
			pingguobj.value['result'][ind]['flag3'] = !pingguobj.value['result'][ind]['flag3']
		}
		console.log(pingguobj.value, 'pingguobj.valuepingguobj.valuepingguobj.value');
	}
	async function initsj(id) {
		const res = await $api.recordDetailjg({
			id
		})
		if (res.code == 1) {
			pingguobj.value = res.data
			for (var i in pingguobj.value['result']) {
				pingguobj.value['result'][i]['flag1'] = false
				pingguobj.value['result'][i]['flag2'] = false
				pingguobj.value['result'][i]['flag3'] = false
			}
		}
	}

	function classfun(arr, ind) {
		if (arr.length == 1) {
			return 'celiang1 bb'
		} else if (ind == 0) {
			return 'celiang1 bb1'
		} else if (ind == arr.length - 1) {
			return 'celiang1 bb2'
		} else {
			return 'celiang1'
		}
	}
</script>

<style lang="scss">
	.bb {
		border-radius: 12rpx;
	}

	.bb1 {
		border-radius: 12rpx 0rpx 0rpx 12rpx;
	}

	.bb2 {
		border-radius: 0rpx 12rpx 12rpx 0rpx;
	}

	page {
		background: #F7F8FA;
	}

	.pinggujieguo {
		width: 100%;
		overflow: hidden;
		position: relative;

		.headerback {
			width: 100%;
			height: 446rpx;
			background: linear-gradient(180deg, #CAEEFF 71%, rgba(240, 250, 255, 0) 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			position: absolute;
			z-index: -1;
		}

		.ceshiboxss {
			width: 686rpx;
			margin: auto;
			overflow: hidden;
			margin-top: 32rpx;

			.itemboxs {
				width: 100%;
				overflow: hidden;
				margin-bottom: 28rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(0, 0, 0, 0.06);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.centyer {
					width: 630rpx;
					margin: auto;

					.jiegupjieshi {
						width: 100%;
						overflow: hidden;


						.headertop1 {
							width: 100%;
							min-height: 88rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							overflow: hidden;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #1D2129;
							// border-bottom: 2rpx solid #F2F3F5;
							border-top: 2rpx solid #F2F3F5;

							.arrow {
								width: 24rpx;
								height: 24rpx;
								margin-left: 12rpx;
								transition: 0.5s;
							}
						}

						.mshubox {
							padding: 24rpx;
							background: #F7F8FA;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							margin-bottom: 24rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #86909C;
						}

					}

					.textss {
						width: 100%;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;
						padding: 28rpx 0;
						border-top: 2rpx solid #F2F3F5;
					}

					.celiang:first-child .celiang1 {
						border-radius: 12rpx 0rpx 0rpx 12rpx;
					}

					.celiang:last-child .celiang1 {
						border-radius: 0rpx 12rpx 12rpx 0rpx;
					}

					.celiang {
						width: 630rpx;
						border-radius: 12rpx;
						height: 48rpx;
						margin-top: 60rpx;
						display: flex;
						align-items: center;

						.celiang1 {
							width: 33.33%;
							height: 48rpx;
							background: #FF6B6B;
							text-align: center;
							line-height: 48rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FFFFFF;
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;

							.zhibiaonum {
								margin-top: 12rpx;
								width: 100%;
								position: absolute;
								top: -56rpx;
								display: flex;
								justify-content: center;

								.zbbox {
									width: 30rpx;
									display: flex;
									flex-direction: column;
									align-items: center;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									line-height: 24rpx;
									color: #4E5969;

									image {
										width: 16rpx;
										height: 16rpx;
									}
								}
							}

						}

						.celiang2 {
							width: 33.33%;
							height: 48rpx;
							background: #F4D954;
							text-align: center;
							line-height: 48rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}

						.celiang3 {
							width: 33.33%;
							height: 48rpx;
							background: #46C3B1;
							text-align: center;
							line-height: 48rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
						}
					}

					.topbiaoti {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 92rpx;


						.rightfenshu {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #2AB4F5;
						}

						.leff {
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 32rpx;
							color: #1D2129;

							.xbq {
								width: 34rpx;
								height: 20rpx;
								margin-right: 14rpx;
							}
						}
					}
				}

			}
		}

		.caerd {
			width: 686rpx;
			height: 186rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 18rpx 0rpx #AEE5FF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: auto;
			margin-top: 42rpx;

			&_center {
				width: 632rpx;
				margin: auto;

				.line {
					width: 100%;
					display: flex;
					align-items: center;
					height: 90rpx;
					justify-content: space-between;
					border-bottom: 2rpx solid #F2F3F5;

					.lefttext {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 12rpx;
						}
					}

					.name {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #4E5969;
					}
				}
			}
		}
	}
</style>